<!--
名称: 弹窗组件
作者: huangdi_cd
日期: 2021/4/15
说明: 用于快速统一构建弹窗页面
-->
<template>
    <el-dialog class="theme1" width="780px"
        :visible.sync="dialogOpen"
        v-if="dialogOpen"
        @close='closeDialog'
        v-on="$listeners"
        :close-on-click-modal="false">
        <el-tabs type ='border-card' v-model="activeName">
            <el-tab-pane
                :label="title"
                name="first">
                <component  :is="comName" :ref="comName" v-on="$listeners"></component>
            </el-tab-pane>
        </el-tabs>
    </el-dialog>
</template>

<script>
    export default {
        name: 'ADialogCom',
        components: {
        },
        props: {
            comName: {
                type: String,
                default: ''
            },
            title: {
                type: String,
                default: ''
            },
            dialogOpen: {
                type: Boolean,
                default: false
            }

        },
        data () {
            return {
                activeName: 'first',
                aDialogComRef: this.$refs
            }
        },
        methods: {
            closeDialog () {
                this.$emit('closeDialog')
            }
        }
    }
</script>

<style  lang="stylus" rel="stylesheet/stylus">
    .theme1 {
    .el-dialog {
        background-color: rgba(0, 0, 0, 0);
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0);
    }
    .el-dialog__header {
        padding: 0;
    }
    .el-dialog__headerbtn {
        top: 10px;
        width :25px;
        background: url('../../../images/icon/disable.png')  left no-repeat;
        background-size: 25px 25px
        z-index: 9999;
    .el-dialog__close {
        color: #000;
    }
    }
    .el-dialog__headerbtn i {
        content: '修改下面的font-size可以改变图片的大小';
        font-size: 5px;
        visibility: hidden;
    }

    .el-dialog__body {
        padding: 0;
    }

    .el-tabs--card > .el-tabs__header .el-tabs__nav {
        border: none;
    }

    .el-tabs__header {
        margin: 0;
    }

    .el-tabs__content {
        background-color: #fff;
        padding: 20px;
    }

    .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
        border-bottom: 1px solid transparent;
        background: #fff;
    }

    .el-tabs--card > .el-tabs__header .el-tabs__item {
        border-bottom: 1px solid #a3a7af;
        border-left: 1px solid #a3a7af;
        background: #ddd;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;

    &:first-child {
         border-left: 1px solid transparent;
     }
    }

    .el-tabs__item:focus.is-active.is-focus:not(:active) {
        box-shadow: none;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }
    }
</style>
